<script lang="ts">
export default {
    name: 'tabThree'
};
</script>

<script setup lang="ts">

const props = defineProps({
    formData: {
        required: true,
        type: Object,
        default: {}
    },
})

const { formData } = props
const emit = defineEmits(['changeTab'])
const dataFormRef = ref(ElForm);

const options = ref<any>([])
const fileList = ref<any>([])
const typeUploadList = ref<any>(['png', 'jpg', 'jpeg'])

const rules = {
    mobile: [
        {
            required: true,
            message: '手机号码非法',
            trigger: 'blur',
            pattern: /^1\d{10}$/
        }
    ],
    nickName: [{ required: true, message: '请输入账号昵称', trigger: 'blur' }],
    email: [
        {
            required: true,
            message: '请输入联系邮箱',
            trigger: 'blur',
            pattern: /^\w+@\w+\.[a-z]+$/i
        }
    ]
}

const handleChange = (value: any) => {
    console.log(value)
}

function handleSubmitBack() {
    emit('changeTab', 0)
}

/**
 * 表单提交
 */
function handleSubmit() {
    dataFormRef.value.validate((valid: any) => {
        if (valid) {
            emit('changeTab', 1)
        }
    });
}


onMounted(() => {

});
</script>

<template>
    <div class="tab-content">
        <el-form class="form-innner" ref="dataFormRef" :model="formData" :rules="rules" label-width="120px">
            <el-form-item label="属性类型" prop="name">
                <el-cascader v-model="formData.value" :options="options" @change="handleChange" />
            </el-form-item>
            <el-form-item label="规格" prop="protocolTransport">
                <VSku></VSku>
            </el-form-item>
            <el-form-item label="商品相册" prop="protocolTransport">
                <UploadList v-model="fileList" :typeUploadList="typeUploadList"></UploadList>
            </el-form-item>
            <el-form-item label="商品详情" prop="protocolTransport">
                <VTinymce ref="editor" v-model="formData.text" :disabled="false" @getContent="formData">
                </VTinymce>
            </el-form-item>
            <div class="bottom-box">
                <el-button type="primary" @click="handleSubmitBack">上一步</el-button>
                <el-button type="primary" @click="handleSubmit">下一步</el-button>
            </div>
        </el-form>
    </div>
</template>

<style scoped>
.tab-content {
    width: 100%;
}
</style>

